import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Button, Icon,   Avatar,List } from 'antd';
import Link from 'umi/link';
import Ellipsis from '@/components/Ellipsis';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './CardList.less';

@connect(({ room, loading,user }) => ({
  room,
  currentUser: user.currentUser,
  loading: loading.models.list,
}))
class CardList extends PureComponent {

  state={
    current: 1,
    pageSize:10,
  };

  componentDidMount() {
    const {current,pageSize} = this.state;
    this.load(current,pageSize);
  }

  load=(current,pageSize)=>{
    this.setState({
      current,
      pageSize,
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'room/GetAll',
      payload:{
        skipCount: current?(current-1)*pageSize:'0',
        maxResultCount: pageSize,
      },
      callback:response=>{
      }
    });
  };

  render() {
    const {
      currentUser,
      currentUserLoading,
      room: { data:{result:{items=[],totalCount=0}} },
      loading,
    } = this.props;
    const items1=[...items];
    const {current,pageSize} = this.state;
    const pagination={
      total:totalCount,
      showSizeChanger: true,
      showQuickJumper: true,
      current,
      pageSize,
      onChange: (page, pageSize1) => {
        this.load(page,pageSize1);
      },
      onShowSizeChange:(current1,size)=>{
        this.load(0,size);
      }
    };

    const pageHeaderContent =
    currentUser && Object.keys(currentUser).length ? (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src={currentUser.avatar} />
        </div>
        <div className={styles.content}>
          <div className={styles.contentTitle}>
            您好，
            {currentUser.name}
            ，祝你开心每一天！
          </div>
        </div>
      </div>
    ) : null;

    return (
      <PageHeaderWrapper 
        loading={currentUserLoading}
        content={pageHeaderContent}
      >
        <Link to='/list/roomdetail'>
          <Button type="dashed" style={{marginBottom:24}}>
            <Icon type="plus" /> 新建房型
          </Button>
        </Link>
        <div className={styles.cardList}>

          <List
            rowKey="id"
            loading={loading}
            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
            dataSource={items1}
            pagination={pagination}
            renderItem={item =>{
              if(item){
                let image='';
                if(item.roomPictures){
                  image = item.roomPictures[0].pictureUrl;
                }else{
                  
                }
                return (
                  <List.Item key={item.id}>
                    <Card
                      hoverable
                      className={styles.card}
                      actions={[
                        <Link to={`/list/roomdetail/edit/${item.id}`}><Button className={styles.cardbg}>修改</Button></Link>,
                        <Link to={`/list/pricefacilities/${item.id}`}><Button type='primary'>价格</Button></Link>
                      ]}
                    >
                      <Card.Meta
                        avatar={<img alt={item.nackCount} className={styles.cardAvatar} src={image} />}
                        title={<a>{item.name}</a>}
                        description={
                          <Ellipsis className={styles.item} lines={2}>
                            {item.description}
                          </Ellipsis>
                        }
                      />
                    </Card>
                  </List.Item>
                );
              }
              return (
                <List.Item>
                  <Link to='/list/roomdetail'>
                    <Button type="dashed" className={styles.newButton}>
                      <Icon type="plus" /> 新建房型
                    </Button>
                  </Link>
                </List.Item>
              );
            }
            }
          />
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default CardList;
